<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品信息')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="white-bg">
<div id="compressor"></div>
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-product-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">选分类：</label>
                <div class="col-sm-8">
                    <select name="typeId" class="typeId form-control" onchange="typeChange()" required><option value="">全部</option></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">商品品牌：</label>
                <div class="col-sm-8">
                    <select name="brandId" class="brandId form-control"><option value="">全部</option></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">商品名：</label>
                <div class="col-sm-8">
                    <input name="productName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">单价：</label>
                <div class="col-sm-8">
                    <input id="priceText" name="productPrice" class="form-control" type="text" required>
                    <label style="font-size: 16px"><input id="priceBox" type="checkbox" value="" onchange="priceChange()"> <i></i> 时价</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">单位：</label>
                <div class="col-sm-8">
                    <input name="productUnit" class="form-control" type="text" required value="个">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">库存：</label>
                <div class="col-sm-8">
                    <input name="productStore" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">编号：</label>
                <div class="col-sm-8">
                    <input name="purchasePrice" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">简称：</label>
                <div class="col-sm-8">
                    <input name="productShortName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">商品图片：</label>
                <div class="col-sm-8 fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                        <!--                        <img src="/img/profile.jpg">-->
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail"
                         style="max-width: 200px; max-height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                            <input type="file" name="imageFile" id="imageFile">
                            <input name="productImg" type="hidden" id="productImg">
                        </span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control"></textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <th:block th:include="include :: jquery-cxselect-js" />
    <th:block th:include="include :: jasny-bootstrap-js"/>
    <th:block th:include="include :: image-compressor-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "baseInfo/product"
        $("#form-product-add").validate({
            focusCleanup: true
        });

        $('#imageFile').change(function(e){
            vm.compressImage(e.target.files[0]);
        })

        function submitHandler() {
            if ($.validate.form()) {
                if (null == vm.outputFile){
                    $.operate.save(prefix + "/add", $('#form-product-add').serialize());
                }
                else {
                    var data = new FormData();
                    data.append("imageFile",vm.outputFile,vm.imgName);
                    $.ajax({
                        type: 'post',
                        url: prefix + "/uploadImage",
                        cache: false,    //上传文件不需缓存
                        processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                        contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                        data: data,
                        dataType: 'json',
                        success: function (result) {
                            if (result.code == web_status.SUCCESS) {
                                $('#productImg').val(result.productImg);
                                $.operate.save(prefix + "/add", $('#form-product-add').serialize());
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function () {
                            $.modal.alertError('图片上传请求异常');
                        }
                    })
                }
            }
        }

        function priceChange() {
            if($("#priceBox").is(':checked')){
                $("#priceText").val('时价');
                $("#priceText").attr("disabled",true);
            }
            else{
                $("#priceText").val('');
                $("#priceText").attr("disabled",false);
            }
        }

        //品牌
        var brandData = [[${brandList}]];
        $('#form-product-add').cxSelect({
            required: false,
            firstTitle: '全部',
            selects: ['brandId'],
            jsonName: 'name',
            jsonValue: 'id',
            data: brandData
        });

        //大分类
        var typeParentData = [[${parentType}]];
        $('#form-product-add').cxSelect({
            required: false,
            firstTitle: '全部',
            selects: ['typeId'],
            jsonName: 'name',
            jsonValue: 'id',
            data: typeParentData
        });

        //小分类选中
        function typeChange() {
            var typeId = $(".typeId").val();
            $.ajax({
                type: "post",
                url: prefix + "/parentTypeChange",
                data: {
                    "typeId": typeId
                },
                success: function(result) {
                    if (result.code == 0) {
                        $('#form-product-add').cxSelect({
                            required: false,
                            firstTitle: '全部',
                            selects: ['brandId'],
                            jsonName: 'name',
                            jsonValue: 'id',
                            data: result.data.brandList
                        });
                        $('#form-product-add').cxSelect({
                            required: false,
                            firstTitle: '全部',
                            selects: ['sizeId'],
                            jsonName: 'name',
                            jsonValue: 'id',
                            data: result.data.sizeList
                        });
                    }
                }
            })
            $.table.search();
        }
    </script>
</body>
</html>